<template>
  <div class="u-p-r-50 u-p-b-50">
    <div>
      <div class="card-disTitle">
        <h3 class="card-title u-flex">
          <div class="card-title-border"></div>
          <span>基本信息</span>
        </h3>
      </div>
      <hr />
      <el-form size="mini" label-width="140px" :inline="true">
        <el-form-item label="所属公司" required>
          <el-select
            size="mini"
            class="seleinput"
            v-model="formData.a1"
            filterable
            clearable
            :style="{ width: '200px' }"
          >
            <el-option
              v-for="item in queryOptions.suoshugongsiOptiopns"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="类型">
          <el-select
            size="mini"
            class="seleinput"
            v-model="formData.a2"
            filterable
            clearable
            :style="{ width: '200px' }"
          >
            <el-option
              v-for="item in queryOptions.leixingOptiopns"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属车队" required>
          <el-select
            size="mini"
            class="seleinput"
            v-model="formData.a3"
            filterable
            clearable
            :style="{ width: '200px' }"
          >
            <el-option
              v-for="item in queryOptions.cheduiOptiopns"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="车队驻地">
          <el-select
            size="mini"
            class="seleinput"
            v-model="formData.a4"
            filterable
            clearable
            :style="{ width: '200px' }"
          >
            <el-option
              v-for="item in queryOptions.zhudiOptiopns"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="姓名" required>
          <el-input v-model="formData.a5" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="简码" required>
          <el-input v-model="formData.a6" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="性别">
          <el-select
            size="mini"
            class="seleinput"
            v-model="formData.a7"
            filterable
            clearable
            :style="{ width: '200px' }"
          >
            <el-option
              v-for="item in queryOptions.xingbieOptiopns"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="生日">
          <el-date-picker
            v-model="formData.a8"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :style="{ width: '200px' }"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="入职日期" required>
          <el-date-picker
            v-model="formData.a9"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :style="{ width: '200px' }"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="劳务类型">
          <el-select
            size="mini"
            class="seleinput"
            v-model="formData.a10"
            filterable
            clearable
            :style="{ width: '200px' }"
          >
            <el-option
              v-for="item in queryOptions.laowuleixingOptiopns"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="联系电话" required>
          <el-input v-model="formData.a11" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="在职状态">
          <el-select
            size="mini"
            class="seleinput"
            v-model="formData.a12"
            filterable
            clearable
            :style="{ width: '200px' }"
          >
            <el-option
              v-for="item in queryOptions.zaizhizhuangtaiOptiopns"
              :key="item.ID"
              :label="item.Name"
              :value="item.ID"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="备注">
          <el-input
            v-model="formData.abz"
            :style="{ width: '200px' }"
            type="textarea"
            autosize
          >
          </el-input>
        </el-form-item>
        <el-form-item label="学历">
          <el-input v-model="formData.a13" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="身份证号" required>
          <el-input v-model="formData.a14" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="准驾车型">
          <el-input v-model="formData.a15" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="从业资格证(司)">
          <el-input v-model="formData.a16" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="家庭地址">
          <el-input v-model="formData.a17" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="从业资格证(司)">
          <el-input v-model="formData.a18" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="自定义1">
          <el-input v-model="formData.a19" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="自定义2">
          <el-input v-model="formData.a20" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="自定义3">
          <el-input v-model="formData.a21" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="自定义4">
          <el-input v-model="formData.a22" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="自定义5">
          <el-input v-model="formData.a23" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="自定义6">
          <el-input v-model="formData.a24" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <!-- 紧急联系人 -->
      <div class="card-disTitle">
        <h3 class="card-title u-flex">
          <div class="card-title-border"></div>
          <span>紧急联系人</span>
        </h3>
      </div>
      <hr />
      <el-form size="mini" label-width="140px" :inline="true">
        <el-form-item label="联系人1">
          <el-input v-model="formData.b1" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话1">
          <el-input v-model="formData.b2" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="关系1">
          <el-input v-model="formData.b3" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="联系人2">
          <el-input v-model="formData.b4" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="联系电话2">
          <el-input v-model="formData.b5" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
        <el-form-item label="关系2">
          <el-input v-model="formData.b6" :style="{ width: '200px' }">
          </el-input>
        </el-form-item>
      </el-form>
      <!-- 离职信息 -->
      <div class="card-disTitle">
        <h3 class="card-title u-flex">
          <div class="card-title-border"></div>
          <span>离职信息</span>
        </h3>
      </div>
      <hr />
      <el-form size="mini" label-width="140px" :inline="true">
        <el-form-item label="离职日期">
          <el-date-picker
            v-model="formData.c1"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :style="{ width: '200px' }"
          >
          </el-date-picker>
        </el-form-item>
        <el-form-item label="离职原因">
          <el-input
            v-model="formData.c2"
            :style="{ width: '200px' }"
            type="textarea"
            autosize
          >
          </el-input>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import ValidateMixin from "@/mixins/ValidateMixin.js";
/**
 * 表单校验
 */
let REQUIRED_PORP_LIST1 = [
  {
    label: "所属公司",
    prop: "a1",
  },
  // {
  //   label: "所属车队",
  //   prop: "hangye",
  // },
  // {
  //   label: "姓名",
  //   prop: "hangye",
  // },
  // {
  //   label: "简码",
  //   prop: "hangye",
  // },
  // {
  //   label: "入职日期",
  //   prop: "hangye",
  // },
  // {
  //   label: "联系电话",
  //   prop: "hangye",
  // },
  // {
  //   label: "身份证号",
  //   prop: "hangye",
  // },
];
export default {
  name: "tab1",
  mixins: [ValidateMixin],
  components: {},
  data() {
    return {
      formData: {
        // ================== 基本数据 ==================
        a1: "",
        a2: "",
        a3: "",
        a4: "",
        a5: "",
        a6: "",
        a7: "",
        a8: "",
        a9: "",
        a10: "",
        a11: "",
        a12: "",
        abz: "",
        a13: "",
        a14: "",
        a15: "",
        a16: "",
        a17: "",
        a18: "",
        a19: "",
        a20: "",
        a21: "",
        a22: "",
        a23: "",
        a24: "",
        // ---------- 紧急联系人 ----------
        b1: "",
        b2: "",
        b3: "",
        b4: "",
        b5: "",
        b6: "",
        // ---------- 离职信息 ----------
        c1: "",
        c2: "",
      },
      queryOptions: {
        suoshugongsiOptiopns: [
          {
            ID: "1",
            Name: "广州公司",
          },
        ],
        leixingOptiopns: [
          {
            ID: "1",
            Name: "司机",
          },
          {
            ID: "2",
            Name: "押运员",
          },
        ],
        cheduiOptiopns: [
          {
            ID: "1",
            Name: "广州车队",
          },
        ],
        zhudiOptiopns: [
          {
            ID: "1",
            Name: "广州",
          },
        ],
        xingbieOptiopns: [
          {
            ID: "1",
            Name: "男",
          },
          {
            ID: "2",
            Name: "女",
          },
        ],
        laowuleixingOptiopns: [
          {
            ID: "1",
            Name: "合同工",
          },
        ],
        zaizhizhuangtaiOptiopns: [
          {
            ID: "1",
            Name: "在职",
          },
          {
            ID: "2",
            Name: "离职",
          },
        ],
      },
    };
  },
  methods: {
    //校验必填
    verify_required() {
      return this.$validateForm(this.formData, REQUIRED_PORP_LIST1);
    },
  },
  created() {},
};
</script>

<style lang="scss" scoped>
.h4-sre {
  margin: 15px !important;
  font-weight: bold;
}
.h3-sre {
  @extend .h4-sre;
  text-shadow: 1px -3px 2px #9cf3f5;
}
.card {
  margin-bottom: 25px;

  &-title {
    font-size: 1.25rem;
    margin: 10px 2%;

    &-border {
      border: 1px double #f59a23;
      width: 6px;
      margin-right: 10px;
      background-color: #f59a23;
      height: 30px;
    }
  }

  &-disTitle {
    margin: 10px 0;
  }
}
</style>
